<template>
  <el-dialog v-model="dialogVisible" :title="title" width="350px" height="auto" @close="handleDialogClose">
    <el-card>
      <el-container>
        <el-header>

          <div class="top">
            <h2>{{ project.title }}</h2>
            <el-rate v-model="project.star" disabled allow-half color="#ffd04b" />
          </div>

          <div class="foot">

            <div class="tag">
              <el-tag v-for="(tag, idx) in project.tags" :key="idx" type="info" size="mini">
                {{ tag }}
              </el-tag>
            </div>

            <div class="author">
              <span>{{ project.authorEdit }}</span>
            </div>

          </div>

        </el-header>

        <hr />

        <el-main>
          <div class="project-grid">
          <div class="grid-label">描述：</div>
          <div>{{ project.desc }}</div>
          <div class="grid-label">成员：</div>
          <div>{{ project.members }}</div>
          <div class="grid-label">开始时间：</div>
          <div>{{ project.period }}</div>
          <div class="grid-label">更新时间：</div>
          <div>{{ project.updateTime }}</div>
          <div class="grid-label">仓库地址：</div>
          <div><a :href="project.repo" target="_blank">{{ project.repo }}</a></div>
          <div class="grid-label">联系方式：</div>
          <div>
            {{ project.connect }}
            <el-icon><ChatDotRound /></el-icon>
          </div>
          </div>
          <div class="operation">
            <div class="edit" @click="handleEdit">
              <el-icon color="#409EFF">
                <Edit />
              </el-icon>
              <p>编辑</p>
            </div>

            <div class="del" @click="handleDel">
              <el-icon color="#F56C6C">
                <DeleteFilled />
              </el-icon>
              <p>删除</p>
            </div>
          </div>
        </el-main>

      </el-container>

    </el-card>

  </el-dialog>

  <ProjectDialog :visible="showDialog" :title="'项目编辑'" @update:visible="showDialog = $event" />
</template>

<script setup>
import { ChatDotRound, Edit, DeleteFilled, Phone } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
import ProjectDialog from './EditProject.vue';
import ProjectDao from '../../daos/project_dao';
const projectDao = new ProjectDao();

const project = ref({

});

const showDialog = ref(false);

// 1. 接收父组件传递的 visible prop
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  projectId: {
    type: Number,
    default: 0
  }
});

// 2. 内部响应式变量，用于控制弹窗显示，初始值同步父组件的 visible
const dialogVisible = ref(props.visible);

watch(() => props.projectId, (newVal) => {
  console.log('projectId', newVal);
  init(newVal);
});

const init = (projectId) => {

  const result = projectDao.SelectProjectDetailsByProjectId(projectId).then(result => {
    console.log(result.data.data.projectName);
    project.value = {
      tags: result.data.data.tagNameArr,
      author: result.data.data.masterName,
      title: result.data.data.projectName,
      members: result.data.data.studentsNames,
      desc: result.data.data.projectDesc,
      period: new Date(result.data.data.startTime).toISOString().split('T')[0],
      updateTime: new Date(result.data.data.endTime).toISOString().split('T')[0],
      repo: result.data.data.gitAddress,
      star: result.data.data.stars,
      connect: result.data.data.phone
    };
  });
}
// 3. 监听父组件 visible 的变化，实时更新子组件内部的 dialogVisible
watch(() => props.visible, (newVal) => {
  dialogVisible.value = newVal;
});

const handleDialogClose = () => {
  emit('update:visible', false);
}

// 4. 定义触发更新的事件，让父组件可以响应子组件的关闭操作
const emit = defineEmits(['update:visible']);

const handleEdit = () => {
  // 编辑逻辑
  emit('update:visible', false);
  showDialog.value = true;
  console.log('点击编辑')
}
const handleDel = () => {
  // 删除逻辑
  console.log('点击删除')
}

</script>

<style>
.top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.foot {
  display: flex;
  justify-content: space-between;
}
.tag {
  display: flex;
  gap: 3px;
}
.connect {
  display: flex;
}
.operation {
  display: flex;
  justify-content: space-between;
  margin-top: 15%;
}
.edit {
  align-items: center;
  color: #409EFF;
  cursor: pointer;
}
.del {
  align-items: center;
  color: #F56C6C;
  cursor: pointer;
}
.project-grid{
  display: grid;
  grid-template-columns: max-content auto;
}
.grid-label{
  text-align: right;
}
</style>